<template>
  <div>
    <newheader></newheader>
    <div class="cheader">
      <div style="width: 60%;margin: 0 auto;line-height: 100px">
        <el-row>
          <el-col
            :span="3"
            style="font-size: 28px;cursor: pointer;color: #00ae66;font-weight: bold"
          >爱佳租房</el-col>
          <el-col :span="1" :offset="2" style="cursor: pointer">
            <span @click="send('/newHouse')">在售</span>
          </el-col>
          <el-col :span="1" style="cursor: pointer">
            <span @click="send('/rentHouse')">小区</span>
          </el-col>
          <el-col :span="2" style="cursor: pointer">
            <span @click="findMap">地图找房</span>
          </el-col>
          <el-col :span="4" :offset="4" style="cursor: pointer;color: #00ae66;float: right;">
            <span @click="send('/businessHouse')" style="color: #00ae66;">客服热线234242343</span>
          </el-col>
        </el-row>
      </div>
      <div style="padding-top: 30px">

        <search></search>
        <!-- <el-row class="csearch" type="flex" justify="center">
          <el-col :span="8">
            <el-input
              placeholder="请输入内容"
              v-model="searchContent"
              class="input"
              style="border-radius: 0px"
            ></el-input>
          </el-col>
          <el-button type="success" class="cbtn-bg" @click="searchHouse">开始找房</el-button>
        </el-row> -->
      </div>
    </div>

    <div style="width: 60%;margin: 0 auto;padding: 20px">
      <el-row class="crow">
        <label>售价</label>
        <el-checkbox label="1000元以下" true-label="1" false-label="0" @change="handleChange()" ref="checkbox1"></el-checkbox>
        <el-checkbox label="1000-1500" true-label="1" false-label="0" @change="handleChange()" ref="checkbox2"></el-checkbox>
        <el-checkbox label="1500-2000" true-label="1" false-label="0" @change="handleChange()" ref="checkbox3"></el-checkbox>
        <el-checkbox label="2000-2500" true-label="1" false-label="0" @change="handleChange()" ref="checkbox4"></el-checkbox>
        <el-checkbox label="2500-3000" true-label="1" false-label="0" @change="handleChange()" ref="checkbox5"></el-checkbox>
        <el-checkbox label="3000元以上" true-label="1" false-label="0" @change="handleChange()" ref="checkbox6"></el-checkbox>
      </el-row>
      <el-row class="crow">
        <label>房型</label>
        <el-checkbox label="一室" true-label="1" false-label="0"  @change="handleChange()" ref="checkbox7"></el-checkbox>
        <el-checkbox label="二室" true-label="1" false-label="0"  @change="handleChange()" ref="checkbox8"></el-checkbox>
        <el-checkbox label="三室" true-label="1" false-label="0" @change="handleChange()" ref="checkbox9"></el-checkbox>
        <el-checkbox label="四室" true-label="1" false-label="0" @change="handleChange()" ref="checkbox10"></el-checkbox>
        <el-checkbox label="五室及以上" true-label="1" false-label="0"></el-checkbox>
      </el-row>
      <el-row class="crow">
        <label>面积</label>
        <el-checkbox label="50㎡以下" true-label="1" false-label="0"  @change="handleChange()" ref="checkbox11"></el-checkbox>
        <el-checkbox label="50㎡-100㎡" true-label="1" false-label="0"  @change="handleChange()" ref="checkbox12"></el-checkbox>
        <!-- <el-checkbox label="70㎡-90㎡" true-label="1" false-label="0"></el-checkbox>
        <el-checkbox label="90㎡-110㎡" true-label="1" false-label="0"></el-checkbox>
        <el-checkbox label="110㎡-130㎡" true-label="1" false-label="0"></el-checkbox> -->
        <el-checkbox label="100㎡-150㎡" true-label="1" false-label="0"  @change="handleChange()" ref="checkbox13"></el-checkbox>
        <el-checkbox label="150㎡以上" true-label="1" false-label="0" @change="handleChange()" ref="checkbox14"></el-checkbox>
      </el-row>
    </div>
    <div style="width: 60%;margin: 0 auto;padding: 20px">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <!-- <el-menu-item index="1">默认排序</el-menu-item> -->
        <el-menu-item index="1">最新发布</el-menu-item>
        <el-menu-item index="2">房屋总价</el-menu-item>
        <!-- <el-menu-item index="5">房屋单价</el-menu-item> -->
        <el-menu-item index="3">房屋面积</el-menu-item>
      </el-menu>
      <el-row>
        <h2>共找到{{total}}套温州出租房</h2>
      </el-row>
      <el-divider></el-divider>
      <el-row style="width:100%">
        <el-col style="width:85%;float:left">
          <el-row
            :gutter="20"
            style="height: 200px;padding-top:20px;cursor:pointer;border-bottom: 1px #DCDFE6 solid"
            v-for="item in list"
            :key="item.id"
          @click.native="info(item.id)">
            <el-col :span="4" style="height: 100%;">
              <el-row style="height: 90%;">
                <el-image :src="item.pic" style="height: 100%;"></el-image>
              </el-row>
            </el-col>
            <el-col :span="16">
              <el-row>
                <h2>{{item.title}}</h2>
              </el-row>
              <el-row class="crow">
                <span>户型：{{item.houseType}}</span>
              </el-row>
              <el-row class="crow">
        
                <span>面积：{{item.useArea}}㎡|</span>
                <span>朝向：{{item.orientation}}|</span>
                <span>楼层：{{item.floor}}|</span>
              </el-row>
              <el-row class="crow">
                <span>0关注</span>
              </el-row>
            </el-col>
            <el-col :span="4" style="height: 100%;">
              <span style="color:red;font-weight: bold;font-size: 28px">{{item.rent}}元/月</span>
              <br />
              <!-- <span style="line-height: 30px">单价：暂无</span> -->
            </el-col>
          </el-row>
        </el-col>
        <el-col style="width:10%;float:right">
          <el-button type="primary" class="cbtn" @click="findMap">试试地图找房</el-button>
        </el-col>
      </el-row>
      <el-pagination
        @size-change="fetchData"
        @current-change="fetchData"
        :current-page.sync="currentPage"
        :page-sizes="[5,10,20]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <cfooter></cfooter>
  </div>
</template>

<script>
import newheader from "@/components/newheader";
import cfooter from "@/components/cfooter";
import renthouseApi from "@/api/rent";
import search from "@/components/search";
export default {
  name: "index",
  components: {
    newheader: newheader,
    cfooter: cfooter,
    search:search
  },
  data() {
    return {
      testImage:
        "http://117.51.142.27:9003/5eb404d9-76d8-4048-ad69-24ef1243fa67.jpg",
      activeIndex: "1",
      searchContent: "",
      list1:[], //接收服务端传回来的数组并保证他不会更改
      list2:[], //用来储存经过条件筛选后的数组
      list: [], //用户渲染页面的数组可以随时变换但不影响最初传回来的数组
      total: 0, // 总记录数
      currentPage: 1, // 当前页
      pageSize: 10, // 每页大小
      searchMap: {} // 查询条件
    };
  },
  created() {
      if(this.$route.params.content){
          this.searchMap = {
               "resourceType":2
          }
      }
      this.fetchData();
  },
    mounted() {
        // console.log(this.$route.params.content)
        // if(this.$route.params.content){
          this.searchMap = {
              "resourceType":2
          }
        // }else{

        // }
        
    },
  methods: {
    handleSelect(key, keyPath) {

    this.list=[];
    
   if(this.list2.length==0){
         this.list1.forEach(i => {
       this.list.push(i);
     });
      }else{
        this.list2.forEach(i => {
       this.list.push(i);
     });    
    //  console.log(key)
    //  console.log(keyPath) 
     }
     if(key==2){

       this.list=this.sortKey(this.list,'rent')

     }

      if(key==3){
        this.list=this.sortKey(this.list,'coveredArea')
      }

    },
     send(path) {
      this.$router.push({ path: path });
    },
     findMap(){
      this.$router.push('/tool/houseMap')

    },
    fetchData() {
        renthouseApi
        .search(this.currentPage, this.pageSize, this.searchMap)
        .then(response => {
          // console.log(response);
          // console.log(response.data.HouseResourcesList.list)
         response.data.HouseResourcesList.list.forEach(i => {
          //  console.log(typeof(i.rent));
            if(i.pic!=null){
            i.pic=i.pic.split(',')[0]
            }
            this.list.push(i);
          });
          this.list1 = response.data.HouseResourcesList.list;
          
          this.total= response.data.HouseResourcesList.pagination.total;
          // console.log(this.list1);
          // console.log(this.total);
        });
    },
    info(id) {
        this.$router.push('/rentHouse/info/'+id)
    },
      searchHouse(){
          this.searchMap = {
              "house_title":this.searchContent
          }
          this.fetchData()
      },
       sortKey(array,key){
         //数组排序
          return array.sort(function(a,b){
              var x = a[key];
              var y = b[key];
              return ((y>x)?-1:(x<y)?1:0)   //从小到大排序
      })
  },
      handleChange(){
        //将list清空
        this.list=[];
        //判断是否有条件被选中
        let count=0;
        //判断是否有1级筛选
        let c1=0;
        //判断是否有2级筛选
        let c2=0;

        //二级筛选时被删除的元素先存到一个数组中保存
        let list3=[];
        //三级筛选时被删除的元素先存到一个数组这保存
        let list4=[];
        //进数组前
        // console.log("进数组前"+this.list)
        // console.log(this.list);
        for(let i=1;i<15;i++){
          
          //拼接字符串保证选到对应的checkbook
          let checkbox='checkbox'+i;
          // console.log(checkbox);
          //判断当前checkbox是否被选中
          if(this.$refs[checkbox].model==1){
            //有一个被选中就不能将数组还原
            count++;
                switch(this.$refs[checkbox].label){
                   case "1000元以下":
                        this.list1.forEach(house => {
                          if(house.rent<1000){
                            this.list.push(house);
                            c1++;
                          }
                        });
                      
	                       break
                   case "1000-1500":
                        this.list1.forEach(house => {
                          if(1000<=house.rent&&house.rent<1500){
                            this.list.push(house);
                             c1++;
                          }
                        });
                         break
                    // case "200-250":
                    //     this.list1.forEach(i => {
                    //       if(250<i.rent&&i.rent<300){
                    //         this.list1.push(i);
                    //       }
                    //     });
	
                         break
                    case "1500-2000":
                        this.list1.forEach(house => {
                          if(1500<=house.rent&&house.rent<2000){
                            this.list.push(house);
                               c1++;
                          }
                        });
	
                         break
                    case "2000-2500":
                        this.list1.forEach(house => {
                          if(2000<=house.rent&&house.rent<2500){
                            this.list.push(house);
                             c1++;
                          }
                        });
	
                         break
                    case "2500-3000":
                        this.list1.forEach(house => {
                          if(2500<=house.rent&&house.rent<3000){
                            this.list.push(house);
                             c1++;
                          }
                        });
                         break
                    
                     case "3000元以上":
                        this.list1.forEach(house => {
                          if(house.rent&&house.rent>500){
                            this.list.push(house);
                             c1++;
                          }
                        });
                         break
                    case "一室":
                      c2++;
                        //先判断是否经历了1级筛选
                        if(c1==0){

                          this.list1.forEach(house => {
                            console.log(house.houseType.slice(0,1));
                            if(house.houseType.slice(0,1)=='1'){
                              this.list.push(house);
                            }

                          });
                        }else{
                          //list3数组为空的话证明还没经历2级筛选所以直接删除1级筛选不符合要求的元素
                          if(list3.length==0){
                            // console.log(this.list)
                            // console.log(this.list.length)
                            for(let j=0;j<this.list.length;j++){
                              // console.log(j)
                              // console.log(this.list[j])

                              if(this.list[j].houseType.slice(0,1)!=='1'){
                                //将2级筛选不符合要求的元素暂时储存
                                //  console.log(this.list[j].houseType.slice(0,1));
                                // console.log("我来了一室")
                               list3.push(this.list.splice(j,1));
                               j--;
                                // console.log(this.list.splice(j,1));

                              }
                            }
                          //  console.log(this.list)
                        }
                          else{
                            //已经经历过2级筛选了再在不符合之前二级筛选的基础上的元素加回去
                             list3.forEach(house => {
                           if(house[0].houseType.slice(0,1)=='1'){
                                 //将符合现在的元素加回去
                               this.list.push(house[0]);
                              }
                          });

                          }
                          }
                  
		                     break                    
                case "二室":
                  c2++;
                        //先判断是否经历了1级筛选
                        if(c1==0){

                          this.list1.forEach(house => {
                            console.log(house.houseType.slice(0,1));
                            if(house.houseType.slice(0,1)=='2'){
                              this.list.push(house);
                            }

                          });
                        }else{
                          //list3数组为空的话证明还没经历2级筛选所以直接删除1级筛选不符合要求的元素
                          if(list3.length==0){

                            for(let j=0;j<this.list.length;j++){
                              // console.log(this.list[j])
                              if(this.list[j].houseType.slice(0,1)!='2'){
                                //将2级筛选不符合要求的元素暂时储存
                               list3.push(this.list.splice(j,1));
                                // console.log(this.list.splice(j,1));
                                //因为删除了元素此时这个被删除的元素上索引站了下一个元素所以要将j减1再判断新的站在这个位置上的元素
                                 j--;

                              }
                            }
                          //  console.log(this.list)
                        }
                          else{
                            //已经经历过2级筛选了再在不符合之前二级筛选的基础上的元素加回去
                            list3.forEach(house => {
                           if(house[0].houseType.slice(0,1)=='2'){
                                 //将符合现在的元素加回去
                               this.list.push(house[0]);
                              }
                          });

                          }
                          }
                  
                         break   
                         
              case "三室":
                c2++;
                        //先判断是否经历了1级筛选
                        if(c1==0){

                          this.list1.forEach(house => {
                            // console.log(house.houseType.slice(0,1));
                            if(house.houseType.slice(0,1)=='3'){
                              this.list.push(house);
                            }

                          });
                        }else{
                          //list3数组为空的话证明还没经历2级筛选所以直接删除1级筛选不符合要求的元素
                          if(list3.length==0){

                            for(let j=0;j<this.list.length;j++){
                              // console.log(this.list[j])
                              console.log(typeof(this.list[j].houseType.slice(0,1)))
                              if(this.list[j].houseType.slice(0,1)!='3'){
                                //将2级筛选不符合要求的元素暂时储存
                               list3.push(this.list.splice(j,1));
                                // console.log(this.list.splice(j,1));
                                //因为删除了元素此时这个被删除的元素上索引站了下一个元素所以要将j减1再判断新的站在这个位置上的元素
                                 j--;
                              }
                            }
                          
                        }
                          else{
                            console.log("三室进来了")
                            //已经经历过2级筛选了再在不符合之前二级筛选的基础上的元素加回去
                             list3.forEach(house => {
                           if(house[0].houseType.slice(0,1)=='3'){
                                 //将符合现在的元素加回去
                               this.list.push(house[0]);
                              }
                          });

                          }
                          }
                  
                         break   
                case "四室":
                  c2++;
                  console.log("进来4室")
                        //先判断是否经历了1级筛选
                        if(c1==0){

                          this.list1.forEach(house => {
                            // console.log(house.houseType.slice(0,1));
                            if(house.houseType.slice(0,1)=='4'){
                              this.list.push(house);
                            }

                          });
                        }else{
                          //list3数组为空的话证明还没经历2级筛选所以直接删除1级筛选不符合要求的元素
                          if(list3.length==0){

                            for(let j=0;j<this.list.length;j++){
                              // console.log(this.list[j])
                              if(this.list[j].houseType.slice(0,1)!='4'){
                                //将2级筛选不符合要求的元素暂时储存
                               list3.push(this.list[j]);
                               this.list.splice(j,1)
                                // console.log(this.list.splice(j,1));
                              //因为删除了元素此时这个被删除的元素上索引站了下一个元素所以要将j减1再判断新的站在这个位置上的元素
                                 j--;
                              }
                            }
                          //  console.log(this.list)
                        }
                          else{
                            //已经经历过2级筛选了再在不符合之前二级筛选的基础上的元素加回去
                          list3.forEach(house => {
                           if(house[0].houseType.slice(0,1)=='4'){
                                 //将符合现在的元素加回去
                               this.list.push(house[0]);
                              }
                          });
                          }
                          }
                      
                         break 
                         
                  case "50㎡以下":
                         if(c1==0&&c2==0){

                          this.list1.forEach(house => {
                            // console.log(house.houseType.slice(0,1));
                            if(house.coveredArea<50){
                              this.list.push(house);
                            }

                          });
                        }else{

                          //list4数组为空的话证明还没经历3级筛选所以直接删除1,2级筛选不符合要求的元素
                          if(list4.length==0){

                            for(let j=0;j<this.list.length;j++){
                              // console.log(this.list[j])
                              if(this.list[j].coveredArea>=50){
                                //将3级筛选不符合要求的元素暂时储存
                               list4.push(this.list[j]);
                               this.list.splice(j,1)
                                // console.log(this.list.splice(j,1));
                              //因为删除了元素此时这个被删除的元素上索引站了下一个元素所以要将j减1再判断新的站在这个位置上的元素
                                 j--;
                              }
                            }
                          //  console.log(this.list)
                        }
                          else{
                            //已经经历过3级筛选了再在不符合之前二级筛选的基础上的元素加回去
                          list4.forEach(house => {
                           if(house.coveredArea<50){
                                 //将符合现在的元素加回去
                               this.list.push(house);
                              }
                          });
                          }



                        }

                  
                      break

                  
                  case "50㎡-100㎡":
                    if(c1==0&&c2==0){

                          this.list1.forEach(house => {
                            // console.log(house.houseType.slice(0,1));
                            if(house.coveredArea>=50&&house.coveredArea<100){
                              this.list.push(house);
                            }

                          });
                        }else{

                          //list4数组为空的话证明还没经历3级筛选所以直接删除1,2级筛选不符合要求的元素
                          if(list4.length==0){

                            for(let j=0;j<this.list.length;j++){
                              // console.log(this.list[j])
                              if(this.list[j].coveredArea<50||this.list[j].coveredArea>=100){
                                //将3级筛选不符合要求的元素暂时储存
                               list4.push(this.list[j]);
                               this.list.splice(j,1)
                                // console.log(this.list.splice(j,1));
                              //因为删除了元素此时这个被删除的元素上索引站了下一个元素所以要将j减1再判断新的站在这个位置上的元素
                                 j--;
                              }
                            }
                          //  console.log(this.list)
                        }
                          else{
                            //已经经历过3级筛选了再在不符合之前二级筛选的基础上的元素加回去
                          list4.forEach(house => {
                           if(house.coveredArea>=50&&house.coveredArea<100){
                                 //将符合现在的元素加回去
                               this.list.push(house);
                              }
                          });
                          }



                        }

                      break

                  
                   case "100㎡-150㎡":
                      if(c1==0&&c2==0){

                          this.list1.forEach(house => {
                            // console.log(house.houseType.slice(0,1));
                            if(house.coveredArea>=100&&house.coveredArea<150){
                              this.list.push(house);
                            }

                          });
                        }else{

                          //list4数组为空的话证明还没经历3级筛选所以直接删除1,2级筛选不符合要求的元素
                          if(list4.length==0){

                            for(let j=0;j<this.list.length;j++){
                              // console.log(this.list[j])
                              if(this.list[j].coveredArea<100||this.list[j].coveredArea>=150){
                                //将3级筛选不符合要求的元素暂时储存
                               list4.push(this.list[j]);
                               this.list.splice(j,1)
                                // console.log(this.list.splice(j,1));
                              //因为删除了元素此时这个被删除的元素上索引站了下一个元素所以要将j减1再判断新的站在这个位置上的元素
                                 j--;
                              }
                            }
                          //  console.log(this.list)
                        }
                          else{
                            //已经经历过3级筛选了再在不符合之前二级筛选的基础上的元素加回去
                          list4.forEach(house => {
                           if(house.coveredArea>=100&&house.coveredArea<150){
                                 //将符合现在的元素加回去
                               this.list.push(house);
                              }
                          });
                          }



                        }
                      break


                   case "150㎡以上":
                      if(c1==0&&c2==0){

                          this.list1.forEach(house => {
                            // console.log(house.houseType.slice(0,1));
                            if(house.coveredArea>=150){
                              this.list.push(house);
                            }

                          });
                        }else{

                          //list4数组为空的话证明还没经历3级筛选所以直接删除1,2级筛选不符合要求的元素
                          if(list4.length==0){

                            for(let j=0;j<this.list.length;j++){
                              // console.log(this.list[j])
                              if(this.list[j].coveredArea<150){
                                //将3级筛选不符合要求的元素暂时储存
                               list4.push(this.list[j]);
                               this.list.splice(j,1)
                                // console.log(this.list.splice(j,1));
                              //因为删除了元素此时这个被删除的元素上索引站了下一个元素所以要将j减1再判断新的站在这个位置上的元素
                                 j--;
                              }
                            }
                          //  console.log(this.list)
                        }
                          else{
                            // console.log("150进来了")
                            // console.log(list4)
                            //已经经历过3级筛选了再在不符合之前二级筛选的基础上的元素加回去
                          list4.forEach(house => {
                            // console.log(house)
                           if(house.coveredArea>=150){
                                 //将符合现在的元素加回去
                               this.list.push(house);
                              }
                          });
                          }



                        }
                  
                      break


	                default:
		
		                     break
}



          }

        }
        

        //每次必须清空list2
         this.list2=[];
        //如果没有一个checkbo被选中那么就还原数组
        if(count==0){
          this.list1.forEach(house1 => {
            this.list.push(house1);
          })
          //将筛选数组清空
        }else{
          this.list.forEach(house2 => {
            this.list2.push(house2);
          });
        }
        
      // count=0;
      }

  }
};
</script>

<style scoped>
.cheader {
  width: 100%;
  height: 220px;
  background: #f5f5f6;
}
span {
  color: #000;
}
.csearch {
  width: 100%;
}
.cbtn-bg {
  background: #00ae66;
  border: none;
  border-radius: 0px;
}
.crow {
  line-height: 30px;
}

.cbtn{
  border: none;
  border-radius: 0px;
}
</style>
